<template>
  <a-upload
    v-bind="$attrs"
    :listType="listType"
    :fileList="fileList"
    :remove="handleRemove"
    :beforeUpload="beforeUpload"
    @preview="handlePreview"
    class="upload-list-inline"
  >
    <template v-if="listType === 'picture-card'">
      <div>
        <a-icon :type="loading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">上传</div>
      </div>
    </template>
    <template v-else>
      <a-button :loading="loading">
        <a-icon type="upload" />上传
      </a-button>
    </template>
  </a-upload>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import {
  dataURLtoBlob
} from '@/utils/tools'
import {
  isString
} from 'lodash-es'

@Component
export default class Upload extends Vue {
  @Prop({type: String}) public keyName!: string

  @Prop({type: [String, Array]}) public value!: string

  @Prop({type: [String, Array], default: ''}) public defaultFileList!: string | any
  @Prop({type: String, default: 'picture-card'}) public listType!: string
  @Prop({type: Boolean, default: false}) public multiple!: boolean
  @Prop({type: Number, default: 0}) public index!: string

  public fileList: any[] = []
  public loading: boolean = false

  @Watch('value')
  public onDefaultFileListChanged() {
    let defaultFileList: any[] = []
    if (Array.isArray(this.value)) {
      defaultFileList = this.value
    } else {
      // 判断是否是base64对象
      if (/^data:image\/png;base64/g.test(this.value)) {
        console.log(/^data:image\/png;base64/g.test(this.value))
        defaultFileList = [window.URL.createObjectURL(dataURLtoBlob(this.value))]
      } else {
        defaultFileList = this.value ? this.value.split(',') : []
      }
    }
    this.fileList = defaultFileList.map((item: any, index: number) => {
      if (isString(item)) {
        return {
          uid: index,
          name: item,
          status: 'done',
          url: item,
        }
      } else {
        return Object.assign({
          name: item.url,
          status: 'done',
        }, item)
      }
    })
  }

  // 图片删除
  public handleRemove(file: any) {
    const index = this.fileList.indexOf(file)
    this.$emit('remove', {
      file,
      key: this.keyName,
      resolve: () => {
       this.fileList.splice(index, 1)
      }
    })
  }

  public beforeUpload(file: any) {
    this.handleUpload(file)
    return false
  }

  // 图片上传
  public handleUpload(file: any) {
    this.loading = true
    this.$emit('beforeUpload', {
      file,
      key: this.keyName,
      resolve: (params: { id: number, url: string }) => {
        const cur = {
          uid: +params.id,
          name:  params.url,
          status: 'done',
          url: params.url,
        }
        if (!this.multiple) {
          this.fileList.length = 0
          // @todo 同步地址到字段
          this.$emit('input', params.url)
        }
        this.fileList.push(cur)
        this.loading = false
      }
    })
  }

  public handlePreview(file: any) {
    let imgUrl: string = `${file.url ? file.url.replace(/\/t\//g, '/o/') : ''}`
    window.open(imgUrl, '_blank')
  }
}
</script>

<style lang="less" scoped>
.upload-list-inline /deep/ .ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline /deep/ .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}
.upload-list-inline /deep/ .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
